<template>
  <div class="pagination">
      showNextDot:{{showNextDot}}
    <a
      href="javascript:;"
      class="prev"
      :class="{ 'el-icon-arrow-left': !prevText,disabled:page.currentPage===1}"
      @click="pageChange(page.currentPage - 1)"
      >{{ prevText ? prevText : "" }}</a
    >
    <!-- 当前页往前两页仍然大于1，并且总页数大于按钮数量，显示左边的... -->
    <a
    href="javascript:;"
    class="dot"
    v-if="page.currentPage - 2 > 1 && this.pageCount > this.btnCount"
    @click="prevDotClick"
    @mouseover="showPrevDot = false"
    @mouseleave="showPrevDot = true"
    >
        <span v-show="showPrevDot">...</span>
        <i v-show="!showPrevDot" class="el-icon-d-arrow-left"></i>
    </a>
    <a
      href="javascript:;"
      class="btn"
      :class="{ active: page.currentPage === i }"
      v-for="i in btnArr"
      :key="i"
      @click="pageChange(i)"
      >{{ i }}</a
    >
    <!-- 当前页不是最后一页，并且总页数大于按钮数量，显示右边的... -->
    <!-- {{showNextDot}} -->
    <a
    href="javascript:;"
    class="dot"
    v-if="this.page.currentPage !== this.pageCount && this.pageCount"
    @click="nextDotClick"
    @mouseover="showNextDot = false"
    @mouseleave="showNextDot = true"
    >
        <span v-if="showNextDot">...</span>
        <i v-else class="el-icon-d-arrow-right"></i>
    </a>
    <a
      href="javascript:;"
      class="next"
      :class="{ 'el-icon-arrow-right': !nextText,disabled:page.currentPage===pageCount }"
      @click="pageChange(page.currentPage + 1)"
      >{{ nextText ? nextText : "" }}</a
    >
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    page: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showPrevDot: true,
      showNextDot: true,
      pageCount: 0, // 总页数
      start: null, // 起始按钮
      end: null, // 结束按钮
      btnCount: 5, // 按钮个数
      btnArr: [] // 按钮数组
    }
  },
  watch: {
    page: {
      handler (page) {
        this.pageCount = Math.ceil(page.total / page.pageSize)
        console.log('this.pageCount', this.pageCount)
        this.start = page.currentPage - Math.floor(this.btnCount / 2)
        // 左边边界检测
        if (this.start < 1) this.start = 1

        this.end = this.start + this.btnCount - 1
        // 右边边界检测
        if (this.end > this.pageCount) {
          // 如果得到的 end 大于总页数，则让end直接等于最后一页
          this.end = this.pageCount
          // 根据右边界算出来左边界，确保按钮还是5个
          this.start = this.pageCount - this.btnCount + 1 < 1 ? 1 : this.pageCount - this.btnCount + 1
        }
        // console.log('this.start', this.start)
        // console.log('this.end', this.end)

        this.btnArr = []
        for (var i = this.start; i <= this.end; i++) {
          this.btnArr.push(i)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 点击左边的...
    prevDotClick () {
      let page = this.page.currentPage - 5
      if (page < 1) page = 1
      this.$emit('pageChange', page)
    },
    // 点击右边的...
    nextDotClick () {
      let page = this.page.currentPage + 5
      if (page > this.pageCount) page = this.pageCount
      this.$emit('pageChange', page)
    },
    // 页码发生变化
    pageChange (page) {
      // 当前页在左右边界范围之外 和目前页面一样时不处理
      if (page < 1 || page > this.pageCount || this.page.currentPage === page) return
      this.$emit('pageChange', page)
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f4f4f5;
    margin: 0 6px;
    border-radius: 10%;
    &.active {
      background-color: #409eff;
      color: #fff;
    }
    &.disabled{
        cursor: not-allowed;
        opacity: 0.5;
    }
    &.dot{
        span,i{
            display: inline-block;
            width: 20px;
        }
    }
  }
}
</style>
